<template>
  <div ref="container" class="custom-container" />
</template>

<script>
import mxgraph from "@/mxgraph/mxgraph";
import { apiTrans } from "@/api/etl/trans";
const { mxGraph, mxCodec, mxUtils, mxGraphModel } = mxgraph;
const MxGraph = mxGraph;
const MxCodec = mxCodec;
const MxUtils = mxUtils;
const MxGraphModel = mxGraphModel;
export default {
  name: "ETLTrans",
  data() {
    return {
      model: null,
      graph: null,
    };
  },
  mounted() {
    const container = this.$refs.container;

    this.model = new MxGraphModel();
    this.graph = new MxGraph(container, this.model);
    // 允许连接
    this.graph.setConnectable(true);
    this.graph.setMultigraph(false);
    //this.graph.setTooltips(true);
    this.graph.setPanning(true);
    this.graph.setDropEnabled(true);
    this.graph.setDisconnectOnMove(false);
		
		this.graph.setCellsEditable(false);

    const  baseUrl=process.env.NODE_ENV === 'production' ? '/itbi/static/' : '/static/'
    let styleNode = mxUtils
      .load(baseUrl+"mxgraph/style/default-style.xml?_dc=" + new Date().getTime())
      .getDocumentElement();
    let dec = new mxCodec(styleNode.ownerDocument);
		dec.decode(styleNode, this.graph.getStylesheet());
     
    this.graph.convertValueToString = function(cell){  
      console.log(cell)
			var label = cell.getAttribute('label');
			if(label) {
				if(cell.isEdge() && cell.value.nodeName == 'TransHop') {
					return '<img src="' + label + '" width="16" height="16" />';
				} else if(cell.isEdge() && cell.value.nodeName == 'JobHop') {
					// var jsonArray = Ext.decode(label), label = '';
					// Ext.each(jsonArray, function(img) {
					// 	label += '<img src="' + img + '" width="16" height="16" />';
					// });
					return label;
				} else {
           
					return decodeURIComponent(label);
				}
			}
			
			return label;
		};

    this.graph.getModel().beginUpdate();
    apiTrans
      .openTrans(1, "/", "tt")
      .then((res) => {
        //展示转换
        try {
          // const json = localStorage.getItem("mxgraphjson")
          //   ? JSON.parse(localStorage.getItem("mxgraphjson"))
          //   : {};
          // const xml = this.$x2js.js2xml(json);
          // let xmlDocument = mxUtils.parseXml(xml)
          let xmlDocument = mxUtils.parseXml(decodeURIComponent(res.data));
          //  console.log(xmlDocument)
          let decoder = new mxCodec(xmlDocument);
          let node = xmlDocument.documentElement;
           
          decoder.decode(node, this.graph.getModel());
        } catch (e) {
          console.log(e);
        } finally {
          // Updates the display

          this.graph.getModel().endUpdate();
        }
      })
      .catch(() => {});
    // const xml1 = localStorage.getItem('mxgraphxml') ? localStorage.getItem('mxgraphxml') : ''
    // const json = localStorage.getItem("mxgraphjson")
    //   ? JSON.parse(localStorage.getItem("mxgraphjson"))
    //   : {};
    // const xml = this.$x2js.js2xml(json);
    // const container = this.$refs.container;
    // var graph = new MxGraph(container);

    // Enables rubberband selection
    // new mxRubberband(graph);

    // Gets the default parent for inserting new cells. This
    // is normally the first child of the root (ie. layer 0).
    // var parent = graph.getDefaultParent()

    // Adds cells to the model in a single step
  },
};
</script>

<style scoped>
.custom-container {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  position: relative;
  background-image: url("../../assets/mxgraph/images/grid.gif");
}
</style>